<template>
  <div class="app-container">
      <div class="filter-container">
        <el-input clearable v-model="search.name" placeholder="分类名称" style="width: 220px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
        <el-button type="success" icon="el-icon-add" @click="handleAdd()" style="margin-left:10px;">新增</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" 
      border fit highlight-current-row stripe 
      style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="10%" align="center" label="类别名称">
        <template slot-scope="scope">
          <span>
              {{scope.row.kindName}}
          </span>
        </template>
      </el-table-column>

      <el-table-column  min-width="10%" align="center" label="排序">
        <template slot-scope="scope">
          <span>{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="所属大类">
        <template slot-scope="scope">
          <span>
              {{scope.row.oneKindName}}
          </span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
            <span>{{scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作"  min-width="15%">
        <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row.id)">修改</el-button>
            <el-popconfirm :title="'确定要删除这个分类吗？'" icon="el-icon-info"  icon-color="red"  @onConfirm="handleDelete(scope.row.id)" >
              <el-button type="danger" size="small" slot="reference" style="margin-left:5px;"> 删除 </el-button>
            </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />
     
     <el-dialog :title="dialog.title" :visible.sync="dialog.visible"  width="600px">
        <div class="ci">
          <div class="item">
            <span class="name required">名称</span>
            <span class="value">
              <el-input clearable v-model="dialog.data.name" maxlength="20" placeholder="分类名称" style="width: 220px;"></el-input>
            </span>
          </div>
          <div class="item">
            <span class="name required">排序</span>
            <span class="value">
              <!-- <el-input clearable type="number" v-model="dialog.data.sort"  placeholder="" style="width: 120px;"></el-input> 从小到大排序 -->
              <el-input-number v-model="dialog.data.sort" controls-position="right" :min="0" :max="99999" style="width:130px;"></el-input-number>
              <span style="margin-left:10px;">从小到大排序</span>
            </span>
          </div>
          <div class="item">
            <span class="name required">上级分类</span>
            <span class="value">
               <el-select clearable v-model="dialog.data.oneKindId" :disabled="selectOptions.oneDisabled" placeholder="大类" style="width: 130px;"
                 @change="changeOneKind">
                  <el-option 
                  v-for="(item,index) in selectOptions.one"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="saveKindInfo()" :loading="dialog.saveloading">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as kekindApi from '@/api/kekind'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import guid from '@/utils/guid'


export default {
  name: 'EduTypeList2',
  components: { Pagination },
  data(){
    return{
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        name:'',
      },
      search:{
        name:'',
      },
      selectOptions:{
         one:[],
         two:[],
         oneDisabled:false,
         twoDisabled:false,
      },
      kekinds:{
        one:[],
        two:[]
      },
      dialog:{
          visible:false,
          saveloading:false,
          //数据
          data:{
            id:'',
            name:'',
            sort:''
          }
      },
    }
  },
  created(){
      var that=this;
      that.getList();
      that.getKindOneList();
  },
  mounted(){

  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      kekindApi.getKindList2(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.items.map((item,index)=>{
              item._id=index+1;
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
           
         }
      })

    },
    getKindOneList(){
      var that=this;
      kekindApi.getKindList1({page:1,rows:100}).then(res=>{
        if(res.data && res.data.items){
           res.data.items.map(item=>{
              that.kekinds.one.push(item);
              that.selectOptions.one.push({label:item.kindName,value:item.id});
           });
        }
      })
    },
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.listQuery.name=that.search.name.trim();
      that.getList();
    },
    handleAdd(){
      this.handleEdit(guid.empty);
    },
    handleEdit(id){
        var that=this;
        that.dialog.visible=true;
        var idx=that.list.findIndex(item=>item.id==id);
        if(idx>-1){
            that.dialog.data.id=id;
            that.dialog.data.name=that.list[idx].kindName;
            that.dialog.data.sort=that.list[idx].sort;
            that.dialog.data.oneKindId=that.list[idx].oneKindId;
        }else{
            that.dialog.data.id=id;
            that.dialog.data.name='';
            that.dialog.data.sort='';
            that.dialog.data.oneKindId='';
        }
        setTimeout(()=>{
          that.selectOptions.oneDisabled=(id!=guid.empty);
        },100)
    },
    saveKindInfo(){
        var that=this;
        if(!that.dialog.data.name.trim() || !that.dialog.data.sort || !that.dialog.data.oneKindId){
            that.$message({
                message:'请选择填写完整信息再提交',
                type:'warning'
            });
            return;
        }
        that.dialog.saveloading=true;
        kekindApi.saveKindTwo(that.dialog.data).then(res=>{
            if(res.data){
                that.$message({
                    message:'保存成功',
                    type:'success'
                });
                var idx=that.list.findIndex(item=>item.id==that.dialog.data.id);
                if(idx>-1){
                    that.list[idx].kindName=that.dialog.data.name;
                    that.list[idx].sort=that.dialog.data.sort;
                }else{
                  that.getList();
                }
            }
            setTimeout(()=>{
                that.dialog.saveloading=false;
                that.dialog.visible=false;
            },500)
        }).catch(()=>{
            that.dialog.saveloading=false;
        })
    },
    handleDelete(id){
        var that=this;
        kekindApi.deleteKindTwo({id:id}).then(res=>{
            if(res.data){
                that.$message({
                    message:'删除成功',
                    type:'success'
                });
                setTimeout(()=>{
                    var idx=that.list.findIndex(item=>item.id==id);
                    that.list.splice(idx,1);
                },200)
                
            }
        })
    },
    changeOneKind(){
      this.$nextTick(()=>{
        this.$forceUpdate();
      })
    }
  }
}
</script>
